﻿$(function () {
    const { ref, reactive, computed } = Vue;
    const { storage, tokenSign } = utils.config;
    const app = Vue.createApp({
        setup() {
            const userPanel = ref();
            const showUserPanel = ref(false);
            const isLogin = computed(() => {
                return !(storage.getItem(tokenSign) === null || storage.getItem(tokenSign) === '');
            })

            const animation = reactive({
                enter: (el) => {
                    el.style.overflow = "hidden";
                    // noinspection JSSuspiciousNameCombination
                    let endWidth = window.getComputedStyle(el).height
                    el.style.height = '8px'
                    el.offsetHeight // force repaint
                    // noinspection JSSuspiciousNameCombination
                    el.style.height = endWidth
                    setTimeout(() => {
                        el.style.overflow = null;
                    }, 300)
                },
                afterEnter: (el) => {
                    el.style.height = null;
                },
                leave: (el) => {
                    el.style.height = window.getComputedStyle(el).height
                    el.offsetHeight // force repaint
                    el.style.height = '0px'
                    el.style.overflow = "hidden";
                    el.style.paddingTop = "0px"
                    el.style.paddingBottom = "0px"
                },
                afterLeave: (el) => {
                    el.style.height = null
                }
            })


            // 用户面板 展开时点击其他地方 会缩起来
            document.body.addEventListener('click', (el) => {
                if(userPanel.value && !userPanel.value.contains(el.target)) {
                    showUserPanel.value = false;
                }
            })

            const avatarOnClick = () => {
                showUserPanel.value = !showUserPanel.value;
            }

            const logout = () => {
                storage.clear();
                location.href = '/'
            }

            return {
                userPanel,
                showUserPanel,
                isLogin,
                animation,
                avatarOnClick,
                logout
            }
        }
    });
    const { ElButton } = ElementPlus;
    app.use(ElButton);
    app.mount('#header-bar');
})